<template>
    <div>
        <h2>用户反馈表单</h2>

        <!-- 姓名输入 -->
        <label for="name">姓名：</label>
        <input v-model="Feedbackform.name" id="name" type="text" placeholder="请输入您的姓名" />

        <!-- 反馈类型选择 -->
        <label for="feedback-type">反馈类型：</label>
        <select v-model="Feedbackform.feedback" id="feedback-type">
            <option value="">请选择反馈类型</option>
            <option value="complaint">投诉</option>
            <option value="suggestion">建议</option>
            <option value="other">其他</option>
        </select>

        <!-- 反馈详情 -->
        <label for="details">反馈详情：</label>
        <textarea v-model="Feedbackform.details" id="details" placeholder="请输入您的反馈内容"></textarea>
        <p>已输入字符：{{ charCount }}</p>
        <p>剩余字符：{{ remaining }}</p>

        <!-- 邮件通知 -->
        <p>是否同意接受邮件通知？</p>
        <label>
            <input v-model="Feedbackform.emailnotify" type="radio" name="email-notify" value="yes" /> 是
        </label>
        <label>
            <input v-model="Feedbackform.emailnotify" type="radio" name="email-notify" value="no" /> 否
        </label>

        <!-- 提交按钮 -->
        <button @click="particularslist">提交反馈</button>

        <!-- 提交结果展示 -->
        <div v-if="particulars">
            <h3>反馈详情</h3>
            <p>姓名：{{ Feedbackformcopy.name }}</p>
            <p>反馈类型：{{ Feedbackformcopy.feedback }}</p>
            <p>反馈内容：{{ Feedbackformcopy.details }}</p>
            <p>是否同意接收通知：{{ Feedbackformcopy.emailnotify }}</p>
        </div>
    </div>
</template>

<script setup lang='ts'>
import { computed, reactive, ref, watch } from 'vue';

// 1. 表单输入绑定：姓名 (input)、反馈类型 (select)、反馈详情 (textarea)、邮件通知 (radio) 的值与响应式数据绑定。
const Feedbackform = reactive({
    name: '',
    feedback: '',
    details: '',
    emailnotify: ''
})
// 2. 字符计数：使用计算属性显示反馈详情中可输入字符的剩余数量，并在 textarea 中实时更新。
const charCount = computed(() => {
    return Feedbackform.details.length
})

const remaining = ref(100)

watch(charCount, () => {
    remaining.value = 100 - charCount.value

    const text = Feedbackform.details
    if (text.length >= 100) {
        Feedbackform.details = text.slice(0, 100);
        alert("最多可输入100字")
    }
})

// 3. 条件渲染：根据用户提交的反馈信息，在提交后显示反馈结果。
// 4. 事件处理：处理表单的提交事件，并显示提交的信息。
// 5. 表单重置：在提交反馈后，表单清空，允许用户继续输入新的反馈。


const particulars = ref(false)

let Feedbackformcopy = {
    name: '',
    feedback: '',
    details: '',
    emailnotify: ''
}

function particularslist() {
    Feedbackformcopy = JSON.parse(JSON.stringify(Feedbackform));

    particulars.value = true
    Feedbackform.details = ''
    Feedbackform.name = ''
    Feedbackform.feedback = ''
    Feedbackform.emailnotify = ''
}






</script>

<style scoped>
div {
    margin-bottom: 20px;
}

label {
    display: block;
    margin-bottom: 5px;
}

input[type="text"],
select,
textarea {
    width: 100%;
    padding: 8px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

textarea {
    height: 100px;
    resize: none;
}

button {
    background-color: #28a745;
    color: white;
    padding: 10px 20px;
    border: none;
    cursor: pointer;
    border-radius: 4px;
}

button:hover {
    background-color: #218838;
}

p {
    margin-top: 0;
}

h3 {
    margin-top: 20px;
}

input[type="radio"] {
    margin-right: 5px;
}

.feedback-result {
    border-top: 1px solid #ccc;
    margin-top: 20px;
    padding-top: 20px;
}
</style>